{{extend './layout.htm'}}

{{block 'css'}}
<style>
    .layui-tab-content {padding: 10px 0 0;}
    .layui-form-label {width: 90px;}
    .layui-input-block {margin-left: 120px;}
    .tab-item-self .layui-input-block {margin-right: 150px;}
    .tab-item-self .form-action {float: right; padding: 4px 15px;}
</style>
{{/block}}

{{block 'main'}}
<form method="post" class="layui-form">
    <div class="layui-tab" lay-filter="demo">
        <ul class="layui-tab-title">
            <li class="layui-this">站点设置</li>
            <li>图片上传</li>
            <li>其他</li>
            <li>自定义</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                {{each list item}}
                {{if item.group == 'web'}}
                <div class="layui-form-item">
                    <label class="layui-form-label">{{item.title}}</label>
                    <div class="layui-input-block">
                        {{if item.type == 'input'}}
                        <input type="text" name="{{item.key}}" lay-verType="tips" class="layui-input" value="{{item.value}}" placeholder="{{item.tips}}">
                        {{else if item.type == 'radio'}}
                        {{each item.options option}}
                        <input type="radio" name="{{item.key}}" lay-verType="tips" value="{{option[1]}}" title="{{option[0]}}" {{option[1] == item.value ? 'checked' : ''}}>{{/each}}
                        {{else}}
                        <textarea name="{{item.key}}" placeholder="请输入{{item.title}}" class="layui-textarea">{{item.value}}</textarea>
                        {{/if}}
                    </div>
                </div>
                {{/if}}
                {{/each}}
            </div>
            <div class="layui-tab-item">
                {{each list item}}
                {{if item.group == 'image'}}
                <div class="layui-form-item">
                    <label class="layui-form-label">{{item.title}}</label>
                    <div class="layui-input-block">
                        {{if item.type == 'input'}}
                        <input type="text" name="{{item.key}}" lay-verType="tips" class="layui-input" value="{{item.value}}" placeholder="{{item.tips}}">
                        {{else if item.type == 'radio'}}
                        {{each item.options option}}
                        <input type="radio" name="{{item.key}}" lay-verType="tips" value="{{option[1]}}" title="{{option[0]}}" {{option[1] == item.value ? 'checked' : ''}}>{{/each}}
                        {{else}}
                        <textarea name="{{item.key}}" placeholder="请输入{{item.title}}" class="layui-textarea">{{item.value}}</textarea>
                        {{/if}}
                    </div>
                </div>
                {{/if}}
                {{/each}}
            </div>
            <div class="layui-tab-item">
                {{each list item}}
                {{if item.group == 'other'}}
                <div class="layui-form-item">
                    <label class="layui-form-label">{{item.title}}</label>
                    <div class="layui-input-block">
                        {{if item.type == 'input'}}
                        <input type="text" name="{{item.key}}" lay-verType="tips" class="layui-input" value="{{item.value}}" placeholder="{{item.tips}}">
                        {{else if item.type == 'radio'}}
                        {{each item.options option}}
                        <input type="radio" name="{{item.key}}" lay-verType="tips" value="{{option[1]}}" title="{{option[0]}}" {{option[1] == item.value ? 'checked' : ''}}>{{/each}}
                        {{else}}
                        <textarea name="{{item.key}}" placeholder="请输入{{item.title}}" class="layui-textarea">{{item.value}}</textarea>
                        {{/if}}
                    </div>
                </div>
                {{/if}}
                {{/each}}
            </div>
            <div class="layui-tab-item tab-item-self">
                {{each list item}}
                {{if item.group == 'self'}}
                <div class="layui-form-item">
                    <label class="layui-form-label">{{item.title}}</label>
                    <div class="form-action"><a class="layui-btn layui-btn-sm" href="{{url('form', {id: item.key})}}">编辑</a><a href="{{url('delete', {id: item.key})}}" class="layui-btn layui-btn-danger layui-btn-sm btn-del">删除</a></div>
                    <div class="layui-input-block">
                        {{if item.type == 'input'}}
                        <input type="text" name="{{item.key}}" lay-verType="tips" class="layui-input" value="{{item.value}}" placeholder="{{item.tips}}">
                        {{else if item.type == 'radio'}}
                        {{each item.options option}}
                        <input type="radio" name="{{item.key}}" lay-verType="tips" value="{{option[1]}}" title="{{option[0]}}" {{option[1] == item.value ? 'checked' : ''}}>{{/each}}
                        {{else}}
                        <textarea name="{{item.key}}" placeholder="请输入{{item.title}}" class="layui-textarea">{{item.value}}</textarea>
                        {{/if}}
                    </div>
                </div>
                {{/if}}
                {{/each}}
            </div>
        </div>
    </div>
    <div style="text-align: center;">
        <button class="layui-btn" lay-submit>提交</button><a class="layui-btn btn-add layui-hide" href="{{url('form')}}">新增</a>
    </div>
</form>
{{/block}}

{{block 'js'}}
<script>
    layui.use(['form', 'element'], function(){
        var form = layui.form
        ,element = layui.element;

        $('a.btn-del').each(function() {
            var url = $(this).attr('href');
            $(this).attr('href', 'javascript:;').click(function() {
                layer.confirm("确定删除吗？", function(index) {
                    layer.close(index);
                    $.get(url, function(re) {
                        if(re.state) {
                            layer.msg(re.msg, function() {
                                history.go(0);
                            });
                        }else{
                            layer.msg(re.msg);
                        }
                    });
                });
            });
        });

        element.on('tab(demo)', function(e) {
            if(e.index == 3) {
                $('.btn-add').removeClass('layui-hide');
            } else {
                $('.btn-add').addClass('layui-hide');
            }
        });
    });
</script>
{{/block}}